<template>
    <section>
        <!--&lt;!&ndash;工具条&ndash;&gt;-->
        <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <span class="tips">请为当前角色 </span>
                    <el-tag type="primary">{{role.role_name}}</el-tag>
                    <span class="tips">  配置功能权限</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="success"  @click="handleUpdate" :disabled="butStatus.update" :loading="editLoading">
                        {{btnEditText}}
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col>
            <el-table
                    v-loading="listLoading"
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <!--	<el-table-column
                                    type="selection"
                                    width="55">
                    </el-table-column>-->
                <el-table-column v-for="item in tableTile"
                                 :prop="item.key"
                                 :label="item.name">
                </el-table-column>
                <el-table-column
                        label="可用"><!--原 可见性; 因功能未完善暂时换名称处理,后面功能完善改改回名称并打开下面可操作性即可-->
                    <template scope="scope">
                        <el-checkbox @change="checkboxcg(scope.$index, scope.row,0)"
                                     v-model="scope.row.resource_properties.visibility"
                                     :disabled="butStatus.update"></el-checkbox>
                    </template>
                </el-table-column>
                <!--<el-table-column
                        label="可操作性">
                    <template scope="scope">
                        <el-checkbox @change="checkboxcg(scope.$index, scope.row,1)"
                                     :disabled="butStatus.update"
                                     v-model="scope.row.resource_properties.operating"></el-checkbox>
                    </template>
                </el-table-column>-->
            </el-table>
        </el-col>

        <!--分页-->
        <!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">-->
        <!--<el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"-->
        <!--:total="400" style="float:right">-->
        <!--</el-pagination>-->
        <!--</el-col>-->

    </section>
</template>

<script>
  import util from '../../common/util'
  import dao from '../../common/dao'
  import NProgress from 'nprogress'

  export default {
    data() {
      return {
        role: {
          role_id: "",
          role_name: "",
          tenant: []
        },
        formInline: {},
        butStatus: {update: false},
        tableTile: [{
          key: 'father_resource_name',
          name: '一级菜单'
        }, {
          key: 'resource_name',
          name: '二级菜单'
        }],
        tableData: [],
        btnEditText: "保存"
      }
    },
    methods: {
      pageInit(){ //获取页面跳转参数

        /*let query = this.$store.state.route.query || {};
        this.role = query.role;*/
        this.role = util.fetch('page212_role');
        this.getTableData();

      },
      checkboxcg: function (index, row, checkbox_type) {
        if (row.resource_name === "") {
          //父级，如果选中，子项全部选中，如果取消，子项全部取消
          let v = row.resource_properties.visibility;
          let o = row.resource_properties.operating;
          this.tableData.map(rows => {
            if (rows.father_resource_id === row.father_resource_id && rows.resource_name !== "") {
              if (checkbox_type === 0) {
                rows.resource_properties.visibility = v;
              } else if (checkbox_type === 1) {
                rows.resource_properties.operating = o;
              }
            }
          });
        } else {
          //更新父级的状态，如果子级全部都是false 父项也为false，如果子项有一个true，父项也为true
          let vFlag = false;
          let oFlag = false;
          this.tableData.map(rows => {
            if (rows.father_resource_id === row.father_resource_id && rows.resource_name !== "") {
              if (checkbox_type === 0 && rows.resource_properties.visibility === true) {
                vFlag = true;
              } else if (checkbox_type === 1 && rows.resource_properties.operating === true) {
                oFlag = true;
              }
            }
          });
          this.tableData.map(rows => {
            if (rows.father_resource_id === row.father_resource_id && rows.resource_name === "") {
              if (checkbox_type === 0) {
                rows.resource_properties.visibility = vFlag;
              } else if (checkbox_type === 1) {
                rows.resource_properties.operating = oFlag;
              }
            }
          });
        }
        //如果不可见，则一定不能操作,如果可操作，则一定可见
        this.tableData.map(rows => {
          if (checkbox_type === 0 && !rows.resource_properties.visibility) {
            rows.resource_properties.operating = false;
          }
          if (checkbox_type === 1 && rows.resource_properties.operating) {
            rows.resource_properties.visibility = true;
          }
        });
      },
      handleUpdate: function () {

        //this.getValidateTenantHttp();
        this.btnEditText = '保存中';
        this.editLoading = true;
        let results = [];
        this.tableData.map(rowData => {
          let rp = rowData.resource_properties;
          if (rp.visibility != null || rp.operating != null) {
            let vo = {
              resource_id: rowData.resource_id,
              resource_properties: rowData.resource_properties
            };
            results.push(vo);
          }
        });
        let param = {
          role_id: this.role.role_id,
          results: results
        };
        dao.saveRoleFunc(param).then((response) => {
          this.btnEditText = '保存';
          this.editLoading = false;
          this.butStatus.update = false;
          if (!response.body || response.body.retCode != 200) {
            util.apiMsg(response);
            return false;
          } else {
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
            this.getTableData();
          }
        }, (response) => {
          console.log(response)
        });

      },
      handleSelectionChange: function () {

      },
      getTableData: function () {

        let e = this.role;
        dao.getRoleFunc(e).then((response) => {

          // success callback
          if (response.FX.err) {
            util.apiMsg(response);
            return false
          }
          this.butStatus.update = (response.body.roleType == '1');

          let pageRes = response.body;
          this.tableData = JSON.parse(JSON.stringify(pageRes.results));
          //根据菜单层级显示层级结构
          if (this.tableData != null) {
            this.tableData.map(row => {
              if (row.father_resource_id == "0") {
                row.father_resource_id = row.resource_id;
                row.father_resource_name = row.resource_name;
                row.resource_name = "";
              }
              row.resource_properties.operating = (row.resource_properties.operating == '1');
              row.resource_properties.visibility = (row.resource_properties.visibility == '1');
            });
            this.tableData.sort(function (a, b) {
              if (a.father_resource_id === b.father_resource_id) {
                return (a.resource_id - b.resource_id);
              } else {
                return (a.father_resource_id - b.father_resource_id);
              }
            });
          }
        }, (response) => {
          // error callback
          console.log(response)
        });
      }
    },
    mounted: function () {
      this.pageInit();
    }
  }
</script>

<style scoped>
    .tssel {
        margin-bottom: 10px;
    }
    .tips{
        color: #8c939d;
        font-size: 14px;
    }
</style>